<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
    <!--    引入axios.js-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <table width="50%" border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>分数</th>
                <th>操作</th>
            </tr>

            <tr v-for="stu in stus">
                <td>{{stu.id}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
                <td>{{stu.score}}</td>
                <td>
                    <button @click="showUpdateM(stu.id)">修改</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>


        <div v-show="updateShow">
            姓名: <input type="text" v-model="updateUser.name" > <br>
            年龄: <input type="text" v-model="updateUser.age" > <br>
            性别: <input type="text" v-model="updateUser.gender" > <br>
            分数: <input type="text" v-model="updateUser.score" > <br>
            <input type="hidden" v-model="updateUser.id" > <br>

            <button @click="update">提交</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            stus:[],

            updateShow:false,

            updateUser:{
                id:"",
                name:"",
                age:"",
                gender:"",
                score:""
            }
        },
        methods:{
            findAll(){
                axios({
                    url:"/stu",
                    method:"get"
                }).then(resp=>{
                    let data = resp.data;
                    this.stus = data;
                })
            },
            showUpdateM(id){
                this.updateShow = true;
                axios.get("/stu/"+id).then(resp=>{
                    let data = resp.data;
                    this.updateUser = data;
                });
            },
            update(){
                axios.post("/stu/update",this.updateUser).then(resp=>{
                    //修改成功
                    //隐藏修改框
                    this.updateShow = false;
                    //updateUser模型的数据清空
                    this.updateUser={}
                    //重新查询
                    this.findAll();
                });
            }
        },
        mounted(){
            //进入页面加载数据
            this.findAll();
        }
    });
</script>
</html>